[モバイルUIデザイン]デザインは地味な作業の連続で出来ている実製作

デザイナーの たなか ゆきこ です。 デザインを実際にグラフィックソフトで作成する時のコツを書いていきます。

まず決める

• 使用する色
• テキストのサイズ
• 余白のサイズ

各画面ごとに文字のサイズや余白が違っていたらバラバラな感じがしませんか。 どこか変更したら、全部を同じように変更しましょう。（これ大事！） 決めたら、デザイン定義書にまとめよう。

使用する色

WEBや紙のデザインと同じように、主に使用するメインカラーを決めます。 また、使用するテキストカラー、背景に使用するカラーも決めましょう。 決めたら、よく使う色としてそれぞれのソフトに登録しましょう。Illustrator だと、スウォッチ登録でカラータイプを「特色」にすると、後から変更するときスウォッチの色を変更するだけで全ての色が変更できるので便利です。

• 写真を見せるアプリは、写真を引き立てるためどんな色を使っているのか など、どんな目的で色がどう使われているのか見てみる。
• テキストのような細い塗りとボタンのような塗り面積が大きいものに注目。同じ色でいいと感じるか確認しましょう。

テキストサイズ

使う人やデバイスの大きさにもよりますが、文字が見えないデザインはアウト。

決めきれない人は、標準アプリをスクリーンショットで撮影してみて、確認してみてはいかがでしょうか。

余白のサイズ

テキストと同じように、標準アプリを研究するのもいいです。 メインとなる画面を作成してその画面をもとに決めると良いと思います。

個人的に、モバイル、WEBならば2の乗算(2,4,8,16,32,64)、4の公倍数(4,8,12,16,20,24,28,32,36,40,44)で作成するのが好き。理由は複数あるのですが、一番わかりやすくてざっくりした理由はパソコンだから。 ただし、決めるのは基準の余白なので、触った時の感じで変更する例外があることもあります。タップしにくいなどの実際に触る場合の問題が発生したら変更しましょう。

また、情報はグループ化するとわかりやすいです。近いものは余白を小さく。区別したいものは離します。

 

必ず実機で確認

デザインした後、必ず実機で確認します。ここ大事です。

画像データを書き出して、直接つないで送るのもいいですし、Dropbox に送った方が早い人もいるかもしれません。 iOS と Photoshop ならAdobePreview だとリアルタイムプレビューができます。 一発で決まることはほぼないです。 確認していて、基準で決めていた余白ではどうしてもしっくりこない箇所が出てきたりもします。それを修正しながら、少しづつ完成度を高めていきます。

まとめ

デザインにも、デザインロジックというものが存在します。 その色にした理由とか、余白が入っていることで何かを引き立てたい、区切りとしている。 紙の場合、空白の情緒とか言ったりしたり。

時間的にどうしても、なんとなく作ってしまっている箇所もあったりしてしまいますが、エンジニアさんもデザイナーの指示書に記載してあるからといって『必ずしもその通りに作成しなくてはいけないわけではない』のです。

エンジニア側でおかしいなと思う場合は、お互いに話し合ってみると「デザイナー側が間違っていました」ということも十分にありえます。反対に、ここは絶対に変えて欲しくない！というデザインも存在します。そこには確固たる理由が存在するはずです。疑問点は共有して話し合おう。

チームで製作する以上、お互いの意見を聞く・言うのは大切で、デザイナーに相談してみるといいと思います。逆もまたしかり。私の場合はになりますが、絶対に変えたくない以外の場所は、以外と融通がきく可能性もあります。